<!--
 * @message: 高级搜索组件
-->
<template>
  <Form>
    <FormItem v-for="(queryItem,index) in advancedQueryItemList" :key="queryItem.id">
      <i-input v-model="queryItem.fieldValue" size="large"
               :class="(fieldMap[queryItem.fieldName]!=null&&fieldMap[queryItem.fieldName].itemMap!=null)?'hiddenItem':''">
        <Select
          :transfer="true"
          slot="prepend"
          style="width: 80px"
          v-model="queryItem.logicalOperator"
          class="prepend-class">
          <Option v-for="(v,key) in logicalOperator" :value="key" :key="key">{{v}}
          </Option>
        </Select>
        <Select
          :transfer="true"
          slot="prepend"
          style="width: 120px"
          v-model="queryItem.fieldName"
          :data-index="index"
          class="prepend-class">
          <template v-if="keywordsList.length > 0">
            <Option v-for="item in keywordsList" :value="item.fieldName" :key="item.fieldName"
                    @click.native="changeField(item,index)">{{item.label}}
            </Option>
          </template>
        </Select>
        <Select
          :transfer="true"
          slot="prepend"
          style="width: 100px"
          v-model="queryItem.relationOperator"
          class="prepend-class">
          <Option v-for="(v,key) in relationOperator" :value="key" :key="key">{{v}}
          </Option>
        </Select>
        <Select v-if="fieldMap[queryItem.fieldName]!=null&&fieldMap[queryItem.fieldName].itemMap!=null"
                :transfer="true"
                slot="prepend"
                style="width: 120px"
                v-model="queryItem.fieldValue"
                class="prepend-class">
          <Option value="" key="">不限</Option>
          <Option v-for="(v,key) in fieldMap[queryItem.fieldName].itemMap" :value="key" :key="key">{{v}}</Option>
        </Select>
        <Button slot="append"
                @click="queryItem.sort==='asc'?queryItem.sort='':queryItem.sort='asc'">
          <Icon type="md-arrow-round-up" :class="queryItem.sort==='asc'?'selected':''"/>
        </Button>
        <Button slot="append"
                @click="queryItem.sort==='desc'?queryItem.sort='':queryItem.sort='desc'">
          <Icon type="md-arrow-round-down" :class="queryItem.sort==='desc'?'selected':''"/>
        </Button>
        <Button slot="append"
                @click="removeInputBox(queryItem.id)">
          <Icon type="ios-close" size="20" style="color: crimson; font-weight: bolder"></Icon>
        </Button>

      </i-input>
    </FormItem>
    <FormItem :label-width="50">
      <Button class="btn-font-size" icon="ios-search" style="background: #017FFF;color: #fff"
              @click="handelSearchAdvanced">
        查询
      </Button>
      <Button @click="addInputBox" style="margin-left: 10px;">
        <Icon type="ios-add" size="20"/>
        追加搜索条件
      </Button>
    </FormItem>
  </Form>

</template>

<script>
import BaseUtil from '../../utils/BaseUtil'

export default {
  name: 'AdvancedQuery',
  props: {
    keywordsList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isShow: {
      type: Boolean,
      default: false
    },
    advancedSearchMethod: {
      type: String,
      default: 'advancedSearchMethod'
    }
  },
  data () {
    return {
      advancedQueryItemList: [],
      relationOperator:
          {
            eq: '等于',
            like: '包含',
            ne: '不等于',
            gt: '大于',
            ge: '大于等于',
            lt: '小于',
            le: '小于等于',
            likeRight: '以...开始',
            likeLeft: '以...结尾',
            in: 'in包含',
            notIn: '不包含',
            isNull: '为空',
            isNotNull: '不为空'
          },
      logicalOperator: { and: '且', or: '或' },
      fieldMap: {}
    }
  },
  mounted () {
    for (const i in this.keywordsList) {
      this.fieldMap[this.keywordsList[i].fieldName] = this.keywordsList[i]
    }
    this.addInputBox()
  },
  methods: {
    removeInputBox (id) {
      this.advancedQueryItemList = this.advancedQueryItemList.filter((item) => item.id !== id)
    },
    addInputBox () {
      if (this.keywordsList.length > 0) {
        const fieldName = this.keywordsList[0].fieldName
        this.advancedQueryItemList.push({
          id: BaseUtil.guid(),
          fieldValue: null,
          fieldName: fieldName,
          logicalOperator: 'and',
          sort: '',
          relationOperator: 'eq',
          fieldType: ''
        })
      }
    },
    /**
       * 回调父级高级查询
       * @author Enzo
       * @date 2020-6-23
       */
    handelSearchAdvanced () {
      this.$emit(this.advancedSearchMethod, this.advancedQueryItemList)
    },
    /**
       * 选择字段触发
       * @author Enzo
       * @date 2020-6-23
       */
    changeField (item, index) {
      this.advancedQueryItemList[index].fieldValue = ''
      if (item.fieldType != null) {
        this.advancedQueryItemList[index].fieldType = item.fieldType
      } else {
        this.advancedQueryItemList[index].fieldType = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .ivu-icon.selected {
    color: blue;
  }

  /deep/ .hiddenItem.ivu-input-group > input.ivu-input {
    display: none;
  }
</style>
